<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>葡萄藤PPT</title>

    <link rel="stylesheet" href="../css/reveal/reveal.css">

    <!-- PPT主题，可以在/css/reveal/theme/中选择其他主题，目前暂时只能使用该模板 -->
    <link rel="stylesheet" href="../css/reveal/theme/ptt.css">

    <!-- syntax highlighting 代码高亮主题 -->
    <link rel="stylesheet" href="../lib/reveal/css/zenburn.css">

    <!-- 打印和PDF输出样式 -->
    <script>
        var link = document.createElement( 'link' );
        link.rel = 'stylesheet';
        link.type = 'text/css';
        link.href = window.location.search.match( /print-pdf/gi ) ? '../css/reveal/print/pdf.css' : '../css/reveal/print/paper.css';
        document.getElementsByTagName( 'head' )[0].appendChild( link );
    </script>
</head>
<body>
<img src="../img/demo/logo.png" alt="" usemap="#pttmap" class="base-logo">
<map name="pttmap">
    <area shape="rect" coords="0,0,276,58" href="http://www.jnshu.com" alt="" target="_blank"/>
</map>
<div class="reveal">
    <div class="slides">
        <section>
            <h2  style="font-family: 'Times New Roman';text-transform:none; ">什么是AJAX</h2>
            <h3>【郑州Web小课堂】</h3>
            <p>分享人：王姣妍</p>
        </section>
        <section>
            <p>目录</p>
            <p>1.背景介绍</p>
            <p>2.知识剖析</p>
            <p>3.常见问题</p>
            <p>4.解决方案</p>
            <p>5.编码实战</p>
            <p>6.扩展思考</p>
            <p>7.参考文献</p>
            <p>8.更多讨论</p>
        </section>

        <section>
            <h3>1.背景介绍</h3>
        </section>

        <section style="font-family: 'Times New Roman'; text-transform:none;">
          <h4 style="font-family: 'Times New Roman'; text-transform:none;">什么是Ajax？ </h4>
                <p style="text-align: left;"><br>
                  AJAX即“Asynchronous JavaScript and XML”（异步的JavaScript与XML技术），指的是一套综合了多项技术的浏览器端网页开发技术。
                 <br>通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。
                  这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
                  传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。
                </p>
        </section>
        <section>
            <h3>2.知识剖析</h3>
        </section>
        <section>
            <section>
            <h4>传统的请求方式</h4>
            <p style="text-align: left;">传统的web应用程序中，用户向服务器发送一个请求，然后等待，服务器接受到用户的请求然后响应。在这段时间内，用户会傻乎乎
              的盯着一个空白页面看。这是因为以往的传输方式为同步处理方式。长久以来我们对这种web交互模式已经习惯了，并且以使用者的角度来讲已经觉得是理所当然的事情了。

            </p>
                </section>
            <section>
                
               <img src="../img/js-05-ajax/pic02.png">
                </section>
        </section>
        <section>
            <section  style="font-family: 'Times New Roman'; text-transform:none;">
            <h4 style="font-family: 'Times New Roman'; text-transform:none;">Ajax的工作方式</h4>
            <p style="text-align: left;">和传统的web应用不同，Ajax采取了异步交互避免了用户请求-等待-应答交互方式的缺点。
              Ajax在应用程序和服务器中引入了一个中间层---Ajax引擎，它是用Javascript编写的，在一个隐藏的框架中运行。Ajax引擎负责呈现用户界面，
              以及代表用户和服务器进行交互。Ajax引擎允许用户和服务器进行异步的交互。用户无需傻乎乎的盯着空白页面。
            </p>
            </section>
         
        </section>
        <section>
            <h3>3.常见问题</h3>
        </section>
        <section style="font-family: 'Times New Roman';  text-align: left;">
            <p>1、IE浏览器下面的缓存问题</p>
            <p >2、跨域问题</p>
            <p>3、Ajax乱码问题</p>
            <p>4、使用post提交的时候需要设置content-type为"application/x-www-form-urlencoded"</p>
            <p>5、Ajax对象属性的大小写问题</p>

            <br>
            <p>下面讲解常见问题出现的原因和解决办法</p>
        </section>
        <section>
            <h3>4.解决方案</h3>
        </section>
        <section>
            <section style="text-align: left; font-family: 'Times New Roman'; text-transform:none;">
                第一个问题，缓存问题：<br>在IE浏览器下面使用get请求时，如果第一次请求了数据之后IE会自动缓存数据，如果下一次再发送同样的
              请求的时候浏览器会自动先去找缓存显示出来，所以如果请求的数据有变化的时候，这里是看不到变化的。
                解决办法：<code> xhr.open("get","xxxx.aspx?_dc="+new Date().getTime(),true);</code>
                就是在请求的后面 加上_dc=。。。让url变成唯一，或者是，改成post请求。
            </section>
            <section style="text-align: left; font-family: 'Times New Roman'; text-transform:none;">
                第二个问题，跨域问题：我们先回顾一下域名地址的组成：
        <pre style="font-size: 1.5rem;font-weight: 600">
                    http:// www . google : 8080 / script/jquery.js
                　　http:// （协议号）
                　　www  （子域名）
                　　google （主域名）
                　　 8080 （端口号）
                　　script/jquery.js （请求的地址）
                </pre>


                * 当协议、子域名、主域名、端口号中任意一各不相同时，都算不同的“域”。<br>

                * 不同的域之间相互请求资源，就叫“跨域”。<br>
              本地上面直接采用Nginx跨域实现。在服务器上的话，交给后端吧。。。
                注意 Nginx跨域可以同时配置多个接口的，就是多写几个location就好了，然后location后面带的参数不一样就可以了。
            </section>

            <section>
                <p style="text-align: left; font-family: 'Times New Roman'; text-transform:none;">
                   第三个问题： Ajax乱码问题 <br>
                    乱码问题虽然我们目前遇到的不多，但是也属于比较常见的一个问题了。出现的主要原因就是编码不一致导致的。
                    如果出现乱码问题了，首先检查一下meta声明的charset要和请求的页面返回的charset一致。response.charset="gb2312 or utf-8"
                  写法：header('Content-Type:text/html;charset=GB2312')
                </p>
                </section>
            <section>
                <p style="text-align: left; font-family: 'Times New Roman'; text-transform:none;">
                    第四个问题：使用post提交的时候需要设置 <br> <code>content-Type: application/x-www-form-urlencoded</code>；
                    jQuery中，<code>content-Type: application/x-www-form-urlencoded;charset=utf-8</code> ;<br>
                    AngularJS中$http的 <code>content-Type: application/json; charset=utf-8</code> ;<br>
                  使用原生Ajax需要在open以后才能使用xhr.setRequestHeader()方法，否则出错。
                    xhr.open("post","xxxx.aspx",true);
                    xhr.setRequestHeader("content-type","application/x-www-form-urlencoded") <br>
		    用原生写时必须在open()方法之后send()方法之前调用。
                </p>
                
            </section>
            <section>
                <p style="text-align: left; font-family: 'Times New Roman'; text-transform:none;">
                    第五个问题：Ajax对象属性的大小写问题，有些浏览器比如火狐，对大小写是敏感的，if (xhr.readystate==4)这种写法，
                  在IE下是成立的，但是在火狐下就行不通了，因为IE不区分大小写，火狐是区分大小的。标准写法为if (xhr.readyState==4)，同理还有属性
                  responseText，responseXML。<b>习惯采用驼峰形式的写法可以避免这个问题。</b><br/>
                </p>
            </section>

        </section>
        <section>
            <h3>5.编码实战</h3>
        </section>
        <section>
            <section>
            Javascript原生方法
                <pre>
                <code>
                  var request = new XMLHttpRequest(); // 新建XMLHttpRequest对象;
                  request.onreadystatechange = function () { // 状态发生变化时，函数被回调;
                      if (request.readyState === 4) { // 成功完成
                          // 判断响应结果:
                          if (request.status === 200) {
                              // 成功，通过responseText拿到响应的文本:
                              return success(request.responseText);
                          } else {
                              // 失败，根据响应码判断失败原因:
                              return fail(request.status);
                          }
                      } else {
                          // HTTP请求还在继续...
                      }
                  }

                  // 发送请求:
                  request.open("POST","/skill-ajax/a/login",true);
                  request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                  request.send();
                  alert('请求已发送，请等待响应...');

                // readyState值说明
                // 0,初始化,XHR对象已经创建,还未执行open
                // 1,载入,已经调用open方法,但是还没发送请求
                // 2,载入完成,请求已经发送完成
                // 3,交互,可以接收到部分数据

                // status值说明
                // 200:成功
                // 404:没有发现文件、查询或URl
                // 500:服务器产生内部错误


                </code>
            </pre>
        </section>
            <section>
                原生的讲解
                <p style="text-align: left">
                                      (1) 在使用xhr对象发送请求和处理请求响应之前，必须先用js语言创建一个xhr对象。由于xhr对象当前还不是w3c标准，所以才有多种方式进行创建以解决兼容性问题。具体创建方式如下：  
                               <pre><code>
                   var xmlhttp;
                    if (window.XMLHttpRequest)
                      {// code for IE7+, Firefox, Chrome, Opera, Safari
                      xmlhttp=new XMLHttpRequest();
                      }
                    else
                      {// code for IE6, IE5
                      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                      }
</code></pre>

                </p>
            </section>
            <section  style="font-family: 'Times New Roman'; text-transform:none; text-align: left;">
                (2) 向服务器发送请求 <br>
                (a) open(method,url,async)
                规定请求的类型、URL 以及是否异步处理请求。 <br>
                method：请求的类型；GET 或 POST <br>
                url：文件在服务器上的位置 <br>
                async：true（异步）或 false（同步）<br>
                (b)send(string)<br>
                将请求发送到服务器。<br>
                string：仅用于 POST 请求<br>


            </section>
            <section>
                jQuery方法
                <pre>
                <code>
               $.ajax({
                    url: "/carrots-admin-ajax/a/login",
                    type: "POST",
                    dataType: "json",
                    data: {
                        name: $("#name").val(),
                        pwd: $("#code").val()
                    },
                    success: function (data) {
                        console.log(data);
                        if (data.code === 200) {
                            alert( data.message);
                        } else {
                            alert(data.message);
                        }
                    },
                    error: function (data) {
                        console.log(data);
                        alert("添加失败");
                    }
                    })
                </code>
            </pre>

            </section>
            <section>
                AngularJS方法
            <pre>
                <code>
                $http({
                method:'get',
                url:('/a/a/all/document?type=1&page='+$scope.page),
                headers:{'Content-Type':'application/x-www-form-urlencoded'}
            })
                .success(function (response) {
                    // console.log(12345);
                    console.log(response.total);
                    console.log(response);
                    console.log(aaa);
                    // if (response.message === "查询成功") {
                     $scope.userList = response.data;
                     $scope.userTotal = response.total;
                    $scope.page=response.page;
                    // console.log($scope.userList.total);
                });

                </code>
            </pre>
            </section>

        </section>

        <section>
            <h3>6.扩展思考</h3>
        </section>
        <section>
            <p>Ajax请求中,get和post方法的区别?</p>
            <p>什么时候用get，什么时候用post？</p>
        </section>
        <section>
           最简单的区别：
            <ul>
                <li>
                    1.使用Get请求时,参数在URL中显示,而使用Post方式,则不会显示出来
                </li>
                <li>
                    2.使用Get请求发送数据量小,Post请求发送数据量大

                </li>
                <li>
                    3.get请求需注意缓存问题,post请求不需担心这个问题
                </li>
                <li>
                    4.用get方式时，xmlHTTP.send(),用post时，xmlHTTP.send(参数)
                </li>
            </ul>
        </section>
        <section>
            用get方式可传送简单数据，但大小一般限制在1KB下，数据追加到url中发送（http的header传送），也就是说，
            浏览器将各个表单字段元素及其数据按照URL参数的格式附加在请求行中的资源路径后面。另外最重要的一点是，
            它会被客户端的浏览器缓存起来，那么，别人就可以从浏览器的历史记录中，读取到此客户的数据，比如帐号和密码等。
            因此，在某些情况下，get方法会带来严重的安全性问题。
        </section>
        <section>
            get请求
            <pre>
                <code>
                    //添加参数,以求每次访问不同的url,以避免缓存问题
                    xmlHttp.open("get", "Server.aspx?username=" + encodeURIComponent(username)
                        + "&age=" + encodeURIComponent(age) + "&random=" + Math.random());

                    xmlHttp.onreadystatechange = function () {
                        if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                            document.getElementById("result").innerHTML = xmlHttp.responseText;
                        }
                    }

                    //发送请求,参数为null
                    xmlHttp.send();
                </code>
            </pre>
        </section>
        <section>
            post请求
            <pre>
                <code>
                     //不用担心缓存问题
                    xmlHttp.open("post", "Server.aspx", true);

                    //必须设置,否则服务器端收不到参数
                    xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

                    xmlHttp.onreadystatechange = function () {
                        if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                            document.getElementById("result").innerHTML = xmlHttp.responseText;
                        }
                    }

                    //发送请求,要data数据
                    xmlHttp.send(data);
                </code>
            </pre>
        </section>
        <section>
           1、 对于以后用到的增删改查 <br>
              GET 对应的是“获取数据”，比如搜索框用的是 GET <br>

              POST 对应的是“新增数据”，比如发贴，回复的form用的是POST<br>
            2、在以下情况请使用 POST 请求： <br>

            无法使用缓存文件（更新服务器上的文件或数据库）<br>
            向服务器发送大量数据（POST 没有数据量限制）<br>
            发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
        </section>
        <section>
            <h3>7.参考文献</h3>
        </section>
        <section>
            <p>参考一：<a href="http://blog.csdn.net/xyw591238/article/details/51752813" target="_blank">AJAX工作原理</a></p>
            <p>参考二：<a href="http://blog.csdn.net/liujiahan629629/article/details/17126727" target="_blank">AJAX-核心xhr对象</a></p>
            <p>参考三：
                <a href="http://www.cnblogs.com/blsong/archive/2009/12/30/1636101.html" target="_blank">Ajax常见问题</a></p>
        </section>
        <section>
            <h3>8.更多讨论</h3>
        </section>

        <section>
            <h4>鸣谢</h4>
            <p>感谢大家观看</p>
            <p><small>BY : 左少华 | 韩建名|王姣妍 </small></p>
        </section>

    </div>
</div>

<script src="../lib/reveal/js/head.min.js"></script>
<script src="../lib/reveal/reveal.js"></script>

<script>

    // 以下为常见配置属性的默认值
    // {
    // 	controls: true, // 是否在右下角展示控制条
    // 	progress: true, // 是否显示演示的进度条
    // 	slideNumber: false, // 是否显示当前幻灯片的页数编号，也可以使用代码slideNumber: 'c / t' ，表示当前页/总页数。
    // 	history: false, // 是否将每个幻灯片改变加入到浏览器的历史记录中去
    // 	keyboard: true, // 是否启用键盘快捷键来导航
    // 	overview: true, // 是否启用幻灯片的概览模式，可使用"Esc"或"o"键来切换概览模式
    // 	center: true, // 是否将幻灯片垂直居中
    // 	touch: true, // 是否在触屏设备上启用触摸滑动切换
    // 	loop: false, // 是否循环演示
    // 	rtl: false, // 是否将演示的方向变成RTL，即从右往左
    // 	fragments: true, // 全局开启和关闭碎片。
    // 	autoSlide: 0, // 两个幻灯片之间自动切换的时间间隔（毫秒），当设置成 0 的时候则禁止自动切换，该值可以被幻灯片上的 ` data-autoslide` 属性覆盖
    // 	transition: 'default', // 切换过渡效果，有none/fade/slide/convex/concave/zoom
    // 	transitionSpeed: 'default', // 过渡速度，default/fast/slow
    // 	mouseWheel: true, //是否启用通过鼠标滚轮来切换幻灯片
    // }

    // 初始化幻灯片
    Reveal.initialize({
//        history: true,
        transition: 'default',
        transitionSpeed: 'slow',
        dependencies: [
            { src: '../plugin/markdown/marked.js' },
            { src: '../plugin/markdown/markdown.js' },
            { src: '../plugin/notes/notes.js', async: true },
            { src: '../plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }
        ]
    });
//    原始类型对象直接赋值不会相互影响
//    var a = 1;
//
//    var b = a;
//    b = 10;
//    console.log(a); // 1
////
//    var a = 'hello';
//    var b = a;
//    b = 'world';
//    console.log(a); // hello
//
//    var a = true;
//    var b = a;
//    b = false;
//    console.log(a);

    //数组浅复制
//    var a = ['隔壁老王','冠希哥', '宋经理' //定义一个名为a的属猪，里面有3个值，
//    ];
//    var b = a;   //定义一个变量b，把a赋值给他，这样比、b和a一样了
//    b[2] = '冲冲老师'; //然后把b的第三个值等于冲冲老师
//    console.log(a)//那么现在打印a 是什么结果呢
//
//    var arr = ["One","Two","Three"];   //数组的深复制，slice方法
//    var arrtoo = arr.slice(1);
//    arrtoo[2] = "set Map";
//    console.log(arr);//One,Two,Three
//    console.log(arrtoo);//One,set Map,Three

//
//    var arr1 = ["One","Two","Three"]; //数组的深复制，concat 方法
//    var arrtooo = arr1.concat(111111);
//    arrtooo[1] = "set Map To";
//    console.log(arr1);//One,Two,Three
//    console.log(arrtooo);//One,set Map To,Three

//
//    var b=[1,2,3,4,5];   //concat的链接
//    var c=[6,7,8,9];
//    var d =[4,4,22]
//    console.log(b.concat(c,d))

    var a={name:'yy',age:26};  //对象的浅拷贝哦
    var b=new Object();
    b.name=a.name;
    b.age=a.age;
    b.name='xx';
    console.log(a);//Object { name="yy", age=26}
    console.log(b);//Object { name="xx", age=26}

    var d = {            //对象的浅拷贝哦 第一种
        name: 'd',
        oc: {
            age: 32
        },
        oad: {
            adds: {
                bb: 12
            }
        }
    };
    var deepCopy = function(source) {
        var result = {};
        for (var key in source) {
            result[key] = typeof source[key] === 'object' ? deepCopy(source[key]) : source[key]
        }
        return result
    };

    var c = deepCopy(d);
    c.name = 'c';
    c.oc = {
        age: 49
    };
    console.log(c);
    console.log(d);




//    var person = {    //第二种深拷贝
//        name: 'aa',
//        friends: ['da', 'dsa', 'gf']
//    };
//
//    var aPerson = Object.create(person, {
////        name: {
////            value: "gee"
////        }
//    });
//
//    console.log(person.name);
//    console.log(aPerson.friends)

    var Chinese = {
        nation:'中国'

    }
    var Doctor = {
        career:'医生'
    }
    function extendCopy(p) {
        var c = {};
        for (var i in p) {
            c[i] = p[i];
        }
        c.uber = p;
        return c;
    }
    var Doctor = extendCopy(Chinese);
    Doctor.career = '医生';
    console.log(Doctor); // 中国
    Chinese.birthPlaces = ['北京','上海','香港'];
    var Doctor = extendCopy(Chinese);
    Doctor.birthPlaces.push('厦门');

</script>
</body>
</html>
